<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>舆情情况</title>
    
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <!-- <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> -->
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<!-- <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> -->
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
</head>
<body class="fixed-sidebar full-height-layout gray-bg">
<div class="wrapper wrapper-content">
       <div class="btn-group hidden-xs" role="group">
			<button type="button" class="btn btn-outline btn-default" th:onclick="'javascript:batchRemove()'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon glyphicon-record">时间幅度：</i>
	        </button>
			<button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://www.baidu.com'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">近七天内</i>
	        </button>
	        <button type="button" class="btn btn-outline btn-default" onclick="window.location.href='http://localhost/system/meiti'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">近一个月</i>
	        </button>
	        <button type="button" class="btn btn-outline btn-default" th:onclick="'javascript:ji()'" shiro:hasPermission="monitor:operlog:batchRemove">
	            <i class="glyphicon">近三个月</i>
	        </button>        
        </div>
</div>
<div id="1" class="wrapper wrapper-content">
	<div id="12" class="row">
	<div class="col-sm-12">
		<div class="ibox float-e-margins">
             <div class="ibox-title">
                 <h5>舆情热度概况</h5>
			</div>
            <div id="123" class="ibox-content">
                  <div id="mountNode1">
                  
                  </div>
<script type="text/javascript">

</script>
<script>
$.getJSON('/ruoyi/beifen/hot.js', function(data) {
	
	var ds = new DataSet();
	var dv1 = ds.createView().source(data);
	dv1.transform({
	  type: 'map',
	  callback: function callback(row) {
	    row.Close = parseInt(row.Close);
	    return row;
	  }
	});  
	
		  var chart = new G2.Chart({
		    container: 'mountNode1',
		    forceFit: true,		 
		    height: window.innerHeight-200,
		    padding: [30, 120, 50, 30]
		  });
		  chart.axis('Date', {
		    label: {
		      textStyle: {
		        fill: '#aaaaaa'
		      }/* ,
		      formatter: function formatter(text) {
		        var dataStrings = text.split('.');
		        return dataStrings[2] + '-' + dataStrings[1] + '-' + dataStrings[0];
		      } */
		    }
		  });
		  chart.axis('Close', {
		    label: {
		      textStyle: {
		        fill: '#aaaaaa'
		      }
		    }
		  });
		  chart.tooltip({
		    crosshairs: false
		  });
		  chart.source(dv1, {
		    Date: {
		      tickCount: 10
		    }
		  });
		  chart.line().position('Date*Close');
		  chart.guide().line({
			    top: true,
			    start: ['2017-10-20', 328.42],
			    end: ['2017-11-25', 328.42],
			    lineStyle: {
			      stroke: '#595959',
			      lineWidth: 1,
			      lineDash: [3, 3]
			    },
			    text: {
			      position: 'start',
			      style: {
			        fill: '#8c8c8c',
			        fontSize: 12,
			        fontWeight: 300
			      },
			      content: '均值线 328.42',
			      offsetY: 25
			    }
			  });
		  //guide
		  var max_min = findMaxMin();
		  var max = max_min.max;
		  var min = max_min.min;
		  chart.guide().dataMarker({
		    top: true,
		    content: '全部峰值：' + max.Close,
		    position: [max.Date, max.Close],
		    style: {
		      text: {
		        fontSize: 12
		      }
		    },
		    lineLength: 30
		  });
		  chart.guide().dataMarker({
		    top: true,
		    content: '全部谷值：' + min.Close,
		    position: [min.Date, min.Close],
		    style: {
		      text: {
		        fontSize: 12
		      }
		    },
		    lineLength: 50
		  });
		  chart.render();
		  
		  function findMaxMin() {
		    var maxValue = 0;
		    var minValue = 50000;
		    var maxObj = null;
		    var minObj = null;
		    for (var i = 0; i < data.length; i++) {
		      var d = data[i];
		      if (parseInt(d.Close) > maxValue) {
		        maxValue = parseInt(d.Close);
		        maxObj = d;
		      }
		      if (parseInt(d.Close) < minValue) {
		        minValue = parseInt(d.Close);
		        minObj = d;
		      }
		    }
		    return {
		      max: maxObj,
		      min: minObj
		    };
		  }
		});

		</script>

             </div>
         </div>
     </div>
    </div>
    </div>

</body>
</html>
